<template>
  <view class="pic-centers">
    <view class="pic-items">
      <image
        v-if="imgUrlToArray.length > 0"
        @click.stop="previewImage(index)"
        :src="escapeChinese(item)"
        v-for="(item, index) in imgUrlToArray"
      >
      </image>

      <!-- <image
      v-if="imgUrlToArray.length > 0"
        @click.stop="previewImage(index)"
        :src="encodeURI(item)"
        v-for="(item, index) in imgUrlToArray"
      >
      </image> -->
      <image
        v-if="imgUrlToArray.length == 0"
        @click.stop="upafter"
        src="../../static/zh.png"
      >
      </image>
    </view>

  </view>
</template>

<script>
import uniCard from "@/components/uni-card/uni-card.vue";
import { HTTP_REQUEST_URL, HEADER, TOKENNAME } from "@/config/app.js";
import {
  getGoodsInfo,
  warehouseLists,
  calProductInfo,
} from "../../api/public.js";
export default {
  comments: {
    uniCard,
  },
  props: {
    //打开状态 0=领取优惠券,1=使用优惠券
    ImgUrl: {
      type: String,
      default: "",
    },
    status: {
      type: String,
      default: "",
    },
    pageCheck: {
      type: Boolean,
      default: false,
    },
  },
  data: function () {
    let that = this;
    return {
      productList: {},
      sliderImage: [],
      imgSrc: "",
      header: {
        Authorization: "",
      },
      urlsArray: [],
      imgUrlToArray: [],
    };
  },
  beforeMount() {
    setTimeout(() => {
      if (this.ImgUrl.length > 0) {
        this.imgUrlToArray = this.ImgUrl.split(",");
      }
    }, 1000);
  },
  watch: {
    ImgUrl: {
      immediate: true,
      handler(val) {
        console.log("val", val);
        this.ImgUrl = val;
        if (this.ImgUrl.length > 0) {
          this.imgUrlToArray = val.split(",");
        }
      },
    },
  },
  methods: {
    //处理图片数组中的空元素
    handleBlankElement() {
      for (let i = 0; i < this.imgUrlToArray.length; i++) {
        if (this.imgUrlToArray[i] == "") {
          console.log(1234567890);
          this.imgUrlToArray.splice(i, 1);
        }
      }
    },
    handleImg() {
      let arr = [];
      if (this.ImgUrl.length !== 0) {
        for (let i = 0; i < this.ImgUrl.length; i++) {
          arr[i] = this.ImgUrl[i].split("");
          for (let n = 0; n < arr[i].length; n++) {
            if (arr[i][n] == "\\") {
              arr[i][n] = "/";
            }
          }
          this.ImgUrl[i] = arr[i].join("");
        }
      }
      // return this.ImgUrl
    },
    handleImgs(originImg) {
      let img = originImg;
      let arr = img.split("");
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] == "\\") {
          arr[i] = "/";
        }
      }
      let imgs = arr.join("");
      return imgs;
    },
    previewImage(index) {
      this.urlsArray = this.imgUrlToArray;
      uni.previewImage({
        urls: [this.urlsArray[index]],
        success: function () {},
      });
    },
    upafter() {
      // if (this.status == 'PASS') {
      // 	uni.showModal({
      // 		title:'订单为审核状态,不允许修改'
      // 	})
      // 	return false
      // }
      this.header["Authorization"] = this.$store.state.app.token;
      uni.chooseImage({
        success: (chooseImageRes) => {
          const tempFilePaths = chooseImageRes.tempFilePaths;
          for (let i = 0; i < tempFilePaths.length; i++) {
            uni.uploadFile({
              url: HTTP_REQUEST_URL + "/api/localStorage/uploadImage",
              filePath: tempFilePaths[i],
              name: "file",
              header: this.header,
              formData: {},
              success: (uploadFileRes) => {
                console.log(";uploadFileRes" + JSON.stringify(uploadFileRes));
                this.imgUrlToArray.push(this.handleImgs(uploadFileRes.data));
                this.imgSrc = this.handleImgs(uploadFileRes.data);
                console.log("this.imgUrlToArray", this.imgUrlToArray);
                if (this.pageCheck == true) {
                  this.ImgUrl = this.handleImgs(uploadFileRes.data);
                }
                this.handleBlankElement();
                this.$emit("uploadFileRes", this.imgUrlToArray);
                this.$forceUpdate();
              },
            });
          }
        },
      });
    },
    escapeChinese(url) {
      return url.replace(/[\u4e00-\u9fa5]/g, function (match) {
        return encodeURIComponent(match);
      });
    },
  },
};
</script>

<style lang="scss">
.pic-centers {
  width: 100%;
  height: 100%;
  // margin: 0rpx auto;
  // padding-top: 10rpx;
  // padding-bottom: 10rpx;
  white-space: nowrap;
  // overflow: hidden;
  // overflow-x: scroll;
  // display: flex;
  // justify-content: center;
  align-items: center;
  /* 1 */
  // -webkit-backface-visibility: hidden;
  // -webkit-perspective: 1000;
  // -webkit-overflow-scrolling: touch;
  /* 2 */
  // text-align: justify;

  /* 3 */
  &::-webkit-scrollbar {
    display: none;
  }

  .pic-items {
    display: inline-block;
    width: 100%;
    // margin-left: 18rpx;
    height: 100%;
    // overflow: hidden;
    background-color: #ccccccb;
    // display: flex;
    display: flex;
    flex-wrap: wrap;

    image {
      border-radius: 12rpx;
      margin-right: 10rpx;
      width: 31% !important;
      height: 200rpx;
    }
  }
}
</style>
